<template>
  <div class="tree-search-header" ref="absContainer">
    <div class="search-input-group" compact>
      <dpro-cascader
        class="select-cascader"
        :options="searchOptions"
        :value="selectValue"
        :allowClear="false"
        placeholder="请选择类型"
         @change="change"
        :getPopupContainer="getPopupContainer"
      >
        <template slot="displayRender" slot-scope="{ labels }">
          <span v-if="labels && labels.length > 1">
            {{ `${labels[1]}(${labels[0].slice(0, 2)})` }}
          </span>
          <span v-else>{{ labels[0] }}</span>
        </template>
      </dpro-cascader>
      <input
        type="text"
        v-model="searchText"
        placeholder="请输入"
        class="input-search"
      />
      <svg
        class="icon-close"
        @click="clearInput"
        v-show="searchText.length > 0"
        viewBox="64 64 896 896"
        data-icon="close-circle"
        width="1em"
        height="1em"
        fill="currentColor"
        aria-hidden="true"
        focusable="false"
      >
        <path
          d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 0 0-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"
        ></path>
        <path
          d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
        ></path>
      </svg>
    </div>

    <dpro-button
      class="btn-tree-search"
      type="primary"
      :disabled="searchLoading"
      @click="searchSubmit"
      >搜索</dpro-button
    >
  </div>
</template>

<script>
import { DproCascader, DproSelect, DproButton } from "../../components/index";
import { debounce } from '../../utils/util'
const searchOptions = [
  // {
  //   key: '1',
  //   label: '按目录搜索',
  //   simpleLabel: '目录'
  // },
  {
    value: "2",
    label: "设备名",
    simpleLabel: "设备名",
  },
  {
    value: "3",
    label: "设备码",
    simpleLabel: "设备码",
  },
];
export default {
  name: "TreeSearchHeader",
  components: { DproCascader, DproSelect, DproButton },
  props: {
    searchLoading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      searchOptions,
      searchType: "2",
      searchText: "",
      selectValue: ["2"],
    };
  },
  methods: {
    change(value) {
      this.selectValue = value
      this.$emit("changeType", value);
    },
    showWgtMessage(options) {
      // 低代码平台页面内不提示错误信息
      if (!["dv.dlife.cn"].includes(window.location.host)) {
        wgt.showMessage(options);
      }
    },
    searchSubmit: debounce(function () {
      if (this.searchText && this.searchText.length < 2) {
        return this.showWgtMessage({
          title: '搜索字符数需大于等于2',
          icon: 'error',
          duration: 3000
        })
      } else if (this.searchText && !this.validateSearch(this.searchText)) {
        return  this.showWgtMessage({
          title: '搜索内容不能包含特殊字符',
          icon: 'error',
          duration: 3000
        })
      }
      this.$emit("search", this.searchText, this.selectValue[0]);
    }, 200),
    clearInput() {
      this.searchText = "";
      this.$emit("clear");
    },
    // 校验名称
    validateSearch(name) {
      // 兼容了扩展字符（A-G)、兼容汉字、兼容扩展
      let reg =
        /^[a-zA-Z0-9._\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAD9\u2000-\u2A6D\u2A70-\u2B73\u2B74-\u2B81\u2B82-\u2CEA\u2CEB-\u2EBE\u3000-\u3134\u2F80-\u2FA1]+$/g;
      return reg.test(name);
    },
    getPopupContainer() {
      return this.$refs.absContainer;
    },
  },
};
</script>

<style lang="less" scoped>
.tree-search-header {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  flex-direction: column;

  .search-input-group {
    position: relative;
    width: 100%;
    display: flex;

    .icon-close {
      position: absolute;
      right: 8px;
      top: 9px;
      z-index: 1;
      cursor: pointer;
    }

    .input-search {
      flex: 1;
      padding: 0 10px;
      border-top-right-radius: 4px !important;
      border-bottom-right-radius: 4px !important;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      outline: none;
      border: none;
      font-size: 14px;
      &::placeholder {
        color: #cccccc;
      }
    }
  }
  .select-cascader {
    width: 130px;
    margin-right: 4px;
    /deep/ .dpro-cascader-selection {
      width: 100%;
    }
  }
  /deep/ .dpro-cascader-menu {
    background-color: rgba(0, 0, 0, 0.6);
    .dpro-cascader-menu-item {
      width: 130px;
    }
    .dpro-cascader-menu-item-selected {
      background-color: #4e68f0;
    }
    .dpro-cascader-menu-item:hover {
      background-color: #4e68f0;
    }
  }
  .btn-tree-search {
    width: 100%;
    height: 32px;
    margin: 4px;
    padding: 0;
    font-size: 12px;
    line-height: 1;
  }
}

/deep/ .ant-select-selection-selected-value {
  font-size: 12px;
}
</style>
